<template lang="html">
  <div class="ripple-effect ripple-effect-red">
    <slot></slot>
  </div>
</template>

<script>
import Tool from '@/assets/script/tool';
export default {
  mounted() {
    this.setRipple();
  },
  methods: {
    setRipple() {
      /*
      $(document).ready(function () {
          $(document).on('click', '.ripple-effect', function (e) {
              var rippler = $(this);
              if (rippler.find('.ink').length == 0) {
                  rippler.append('<b class="ink"></b>');
              }
              var ink = rippler.find(".ink");
              ink.removeClass("animate");

              if (!ink.height() && !ink.width()) {
                  var d = Math.max(rippler.outerWidth(), rippler.outerHeight());
                  ink.css({height: d, width: d});
              }
              var x = e.pageX - rippler.offset().left - ink.width() / 2;
              var y = e.pageY - rippler.offset().top - ink.height() / 2;
              ink.css({
                  top: y + 'px',
                  left: x + 'px'
              }).addClass("animate");
          });
      })
      */
      document.addEventListener('click', function (event) {
        var target = event.target;
        if(Tool.hasClass(target, 'ripple-effect')) {
          var ink = target.querySelector('.ink');
          if(!ink) {
            ink = document.createElement('b');
            target.appendChild(ink);
            // ink.innerHTML = "123";
          }
          ink.className = 'ink';
          var width = ink.offsetWidth;
          var height = ink.offsetHeight;
          if(!width || !height) {
            var d = Math.max(target.offsetWidth, target.offsetHeight);
            ink.style.width = d + 'px';
            ink.style.height = d + 'px';
            width = height = d;
          }
          var x = event.pageX - target.offsetLeft - width / 2;
          var y = event.pageY - target.offsetTop - height / 2;

          ink.style.left = x + 'px';
          ink.style.top = y + 'px';
          ink.className = 'ink animate';
          console.log("width: ", width, "height: ", height, x, y);
        }
      });
    }
  }
}
</script>

<style lang="scss">
@import "../../assets/scss/default.scss";
.ripple-effect {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  &.ripple-effect-red .ink {
    background-color: $red;
  }
  &.ripple-effect-yellow .ink {
    background-color: $yellow;
  }
}
.ink {
  display: block;
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background-color: #ffffff;
  opacity: 1;
}
.ink.animate {
  animation: ripple .5s linear;
}
@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}
</style>
